<!--
 * @Author: wang
 * @Date: 2020-09-22 18:05:20
 * @LastEditTime: 2020-08-13 09:16:04
 * @LastEditors: wang
 * @Description: 应急调度 专家通知列表
 * @FilePath: \c-u-f\src\App.vue
-->
<template>
  <div :class="themeClass">
    <div class="notice_box">
      <div class="head_box">
        <div class="title">通知列表</div>
        <div class="close" @click="hideshow(1)">
          <img src="@/assets/images/notice_close.png" v-if="theme == 'dark'" />
          <img src="@/assets/images/b2_notice_close.png" v-else />
        </div>
      </div>
      <div class="container" style="width:99%;">
        <table>
          <thead>
            <tr style="opacity: 0.5;" :class="[theme == 'dark' ? 'bk1' : 'bk2']">
              <th style="min-width:70px;">姓名</th>
              <th style="min-width:70px;">职称</th>
              <th style="min-width:100px;">从事行业及特长</th>
              <th style="min-width:134px;">工作单位</th>
              <th style="min-width:88px;">联系方式</th>
              <th style="width:54px;border-bottom:none;"></th>
            </tr>
          </thead>
          <tbody style="box-sizing:border-box;padding:10px 0;">
            <tr v-for="(item, index) in list" :key="index" :class="[item.state == 1 ? 'bg' : '']">
              <td style="min-width:70px;">{{ item.name }}</td>
              <td style="min-width:70px;">{{ item.dutiesName }}</td>
              <td style="min-width:100px;">{{ item.industryName }}</td>
              <td style="min-width:60px;">{{ item.company }}</td>
              <td style="min-width:88px;">{{ item.phone }}</td>
              <td style="width:54px;background:none;" class="Notified" v-if="item.isConfirm == 1">已确认</td>
              <td class="Nonotice" style="width:54px;background:none;" v-else>未确认</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { expertnoticeList } from '@/api/index'
export default {
  data () {
    return {
      list: [],
      id: ''
    }
  },
  mounted () {
    this.expertnoticelist()
  },
  computed: {
    ...mapState(['theme']),
    themeClass () {
      return `theme-${this.theme}`
    }
  },
  methods: {
    hideshow (data) {
      this.$emit('closenoticelist', data)
    },
    expertnoticelist () {
      console.log('--------')
      this.id = localStorage.getItem('id')
      expertnoticeList({ affectedPointId: this.id }).then(res => {
        if (res.code === 200) {
          console.log(res)
          this.list = res.result
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
.notice_box {
  width: 550px;
  height: 1079px;
  @include themify($themes) {
    background: themed('exper_database_Content');
  }
}
.theme-light .notice_box {
  border: none;
}
.theme-dark .notice_box {
  border: 1px solid #85cdff;
}
.head_box {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
}
.title {
  font-size: 24px;
  letter-spacing: 2px;
  @include themify($themes) {
    color: themed('table_color_h');
  }
}
.close {
  margin-left: auto;
}
.bk1 {
  border-bottom: 1px solid #ffffff;
}
.bk2 {
  border-bottom: 1px solid #425a64;
}
.container table {
  @include themify($themes) {
    color: themed('table_color_h');
  }
  font-size: 14px;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}
.bg td {
  @include themify($themes) {
    background: themed('bg');
  }
}
// .conatiner table thead,
// tbody,
// tr,
// th,
// td {
//   // display: inline-block;
// }

.container table thead {
  width: 100%;
  height: 40px;
  line-height: 40px;
  @include themify($themes) {
    color: themed('table_color_h');
  }
}

.container table thead tr {
  width: 100%;
  box-sizing: border-box;
}
.container table tbody tr {
  width: 100%;
  line-height: 25px;
  box-sizing: border-box;
  padding: 0;
  margin-bottom: 6px;
}

.container table tbody tr:nth-last-of-type(1) {
  border-bottom: none;
}

.container table tbody tr td {
  text-align: center;
}
.container table tbody .checkbox {
  width: 54px;
  border: none;
  background: none;
  margin-right: 5px;
  text-align: right;
  flex: none;
}
.Notified {
  color: #64db3b;
  background: none;
}
.Nonotice {
  color: #db3b3b;
  background: none;
}
.notice_box .container table tbody {
  width: 100%;
  overflow-y: auto;
  height: calc(100vh - 167px);
}
// 滚动条整体部分
.notice_box .container table tbody::-webkit-scrollbar {
  width: 4px;
  opacity: 1;
}
//滚动条里面的滑块
.notice_box .container table tbody::-webkit-scrollbar-thumb {
  height: 20px;
  @include themify($themes) {
    background: themed('t-gdt-hk-bj');
  }
}
//滚动条的轨道
.notice_box .container table tbody::-webkit-scrollbar-track {
  @include themify($themes) {
    background: themed('t-gdt-gd-bj');
  }
}
</style>
